import 'package:flutter/material.dart';
import 'package:flutter_app/class/MyApp2.dart';

class MyApp3 extends StatelessWidget {
  const MyApp3({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const MaterialApp(
      home: StyleEx(),
    );
  }
}

class StyleEx extends StatefulWidget {
  const StyleEx({super.key});

  @override
  State<StyleEx> createState() => StyleState();
}

class StyleState extends State<StyleEx> {
  //右边图片视图
  Widget rightColumn = Image.asset(
    'images/pavlova.jpg',
    fit: BoxFit.cover, //图像应该尽可能小，但覆盖整个渲染框
  );

  //左边标题
  static Widget leftColumnTitle = const Text(
    'Strawberry Pavlova',
    textAlign: TextAlign.center,
    style: TextStyle(
        fontSize: 18.0, color: Colors.black, fontWeight: FontWeight.bold),
  );

  //左边正文
  static Widget leftColumnBody = Container(
    padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
    child: const Text(
      'Pavlova is a meringue -baseddessert named after the Russianballerine Anna Pavlova.\nPavlova featues a crisp crust andsoft, light inside, topped with fruitand whipped cream.',
      softWrap: true,
      textAlign: TextAlign.center,
    ),
  );

  //左边星
  static Row leftStar = const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
       Icon(Icons.star, color: Colors.black),
       Icon(Icons.star, color: Colors.black),
       Icon(Icons.star, color: Colors.black),
       Icon(Icons.star, color: Colors.black),
       Icon(Icons.star, color: Colors.black),
       Text(
        '170 Reviews',
        style: TextStyle(
            color: Colors.black,
            fontSize: 14.0,
            fontFamily: 'Roboto',
            fontWeight: FontWeight.w800,
            letterSpacing: 0.5),
      )
    ],
  );

  //左边底部按钮
  static Widget leftBottomButton = Container(
    padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        createBottomBtn(Icons.kitchen, 'PREP:', '25 min'),
        createBottomBtn(Icons.timer, 'COOK:', '1 hr'),
        createBottomBtn(Icons.restaurant, 'FEEDS:', '4-6'),
      ],
    ),
  );

  //左边视图
  Widget leftColumn = Column(
    children: <Widget>[
      leftColumnTitle,
      leftColumnBody,
      leftStar,
      leftBottomButton
    ],
  );

  /* 创建底部按钮 */
  static Column createBottomBtn(IconData _icon,String _title,String _subtitle) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
           Icon(_icon, color: Colors.green[500]),
           Container(
            padding: const EdgeInsets.fromLTRB(0, 5, 0, 10),
            child: Text(
              _title,
            ),
          ),
          Text(_subtitle)
        ]
    );
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "样式Demo3",
      home:  Scaffold(
        appBar:  AppBar(
          title:  const Text(
            '样式Demo3',
            style: TextStyle(fontSize: 18.0),
          ),
          actions: <Widget>[
             IconButton(
                icon: const Icon(Icons.arrow_right),
                onPressed: () {
                  Navigator.of(context).push(
                     MaterialPageRoute(builder: (context) => MyApp2()),
                  );
                })
          ],
        ),
        body: Container(
          margin: const EdgeInsets.fromLTRB(0.0, 30.0, 0.0, 30.0),
          //height: 300,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
               Row(
                children: <Widget>[
                   SizedBox(
                    width: 240.0,
                    child: leftColumn,
                  ),
                  rightColumn,
                ],
              ),
            ],
          ),
        ),
      ),
      //导航主题色
      theme: ThemeData(primaryColor: Colors.redAccent),
    );
  }
}
